
<!-- 状态统计 -->
<template>
    <div class="app-container">
        <ul class="nav-container">
            <li v-for="(item, index) in statusItems" :key="item.name" :class="{ 'active': activeStatus == index }"
                @click="changeActiveItem(index)">
                <h3 class="name">{{ item.name }}</h3>
                <p class="num">{{ item.num }}<span>辆</span></p>
            </li>
        </ul>

        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item :label="v.name" :prop="v.prop" v-for="v in searchItems">
                <el-input v-if="v.type == 'input'" v-model="queryParams[v.prop]" :placeholder="'请输入' + v.name" clearable
                    @keyup.enter="handleQuery" />
                <el-tree-select v-else-if="v.type == 'treeSelect'" v-model="queryParams[v.prop]"
                    :placeholder="'请输入' + v.name" clearable :data="sel_option[v.prop]" :expand-on-click-node="false"
                    :render-after-expand="false" @change="handleQuery" check-strictly :props="{ label: 'label' }"
                    node-key="id" filterable />
                <el-select v-else-if="v.type == 'select'" v-model="queryParams[v.prop]" clearable filterable
                    :placeholder="'请输入' + v.name" @change="handleQuery">
                    <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['statisticalReportForm:statusStatistics:export']">导出</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table highlight-current-row v-loading="loading" :data="tableList">
            <template v-for="v in tableItems">
                <el-table-column :label="v.name" align="left" :prop="v.prop" :width="v.width" />
            </template>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
</template>
<script setup lang="ts" name="StatusStatistics">
import dayjs from "dayjs"
import { reactive, toRefs, ref, getCurrentInstance } from "vue"
import { treeDept } from "../../api/system/dept";
import request from '../../utils/request'
const loading = ref(false);
const tableList = ref([]);
const { proxy } = getCurrentInstance();
const tableItems = ref([
    { name: '设备名称', prop: "numberPlate" },
    { name: '所属公司', prop: "companyName", width: 400 },
    { name: '最后状态', prop: "vehicleStatus" },
    { name: '最后定位时间', prop: "gdt" },
    { name: '速度(km/h)', prop: "spd" },
    { name: '总里程(km)', prop: "kilometer" },
    { name: '最后位置', prop: "address", width: 400 },
]);
const searchItems = ref([
    { name: '设备名称', prop: "numberPlate", type: 'input' },
    { name: '所属公司', prop: "companyId", type: 'treeSelect' },
]);
const total = ref(0);
const showSearch = ref(true);
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 15,
        companyId: "",
        numberPlate: ""
    },
});
const sel_option = ref({
    companyId: null,
});
const statusItems = ref([
    { name: '入网设备', num: '0' },
    { name: '在线设备', num: '0' },
    { name: '离线设备', num: '0' },
    { name: '从未上线', num: '0' },
    { name: '7天未上线', num: '0' },
    { name: '30天未上线', num: '0' },
]);
const activeStatus = ref(0)

function getStatusTotal() {
    request({
        url: '/comlbs/reportStatistics/deviceStatus/statisticsCount',
        method: 'post'
    }).then(({ data }: any) => {
        statusItems.value[0].num = data.netCar
        statusItems.value[1].num = data.onlineCar
        statusItems.value[2].num = data.offlineCar
        statusItems.value[3].num = data.neverOnlineCar
        statusItems.value[4].num = data.seventyNotOnlineCar
        statusItems.value[5].num = data.thirtyNotOnlineCar
    })
}
getStatusTotal();
treeDept().then(res => {
    sel_option.value.companyId = res.data
})
const { queryParams } = toRefs(data);

function changeActiveItem(_index: number) {
    activeStatus.value = _index;
    queryParams.value.pageNum = 1;
    getList();
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    //@ts-ignore
    proxy.resetForm("queryRef");
    handleQuery();
}
/** 查询列表 */
function getList() {
    loading.value = true;
    request({
        url: '/comlbs/reportStatistics/deviceStatus/statisticsList',
        method: 'post',
        params: { ...queryParams.value, status: activeStatus.value + 1 }
    }).then(({ data }: any) => {
        tableList.value = data.list;
        total.value = data.total;
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    })
}

/** 详情按钮操作 */
function handleDetail(obj: Object) {

}

/** 导出按钮操作 */
function handleExport() {
    //@ts-ignore
    proxy.download('comlbs/reportStatistics/deviceStatus/statisticsListExport',
        { ...queryParams.value, status: activeStatus.value + 1 }
        , `状态统计_${dayjs(new Date()).format("YYYY-MM-DD_HH:mm:ss")}.xlsx`)
}
getList();
</script>
<style lang='scss' scoped>
@-webkit-keyframes progress-bar-borders {
    from {
        background-position: 35px 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes progress-bar-borders {
    from {
        background-position: 35px 0;
    }

    to {
        background-position: 0 0;
    }
}

.nav-container {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 80px;
    width: 100%;
    margin-bottom: 16px;

    li {
        margin: 0 10px;
        box-sizing: border-box;
        padding: 15px 20px 8px 20px;
        width: 185px;
        height: 80px;
        border-radius: 5px;
        border-left: 1px solid #9e9a9a;
        border-right: 1px solid #9e9a9a;
        border-bottom: 2px solid #9e9a9a;
        background-color: #b1b1b1;
        cursor: pointer;

        &:hover {
            opacity: 0.5;
        }

        &.active {
            background: #f60;
            background-image: linear-gradient(-45deg,
                    rgba(255, 255, 255, 0.15) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, 0.15) 50%,
                    rgba(255, 255, 255, 0.15) 75%,
                    transparent 75%,
                    transparent);
            background-size: 40px 40px;
            animation: progress-bar-borders 2s linear infinite;
        }

        .name {
            margin: 0;
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            text-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
        }

        .num {
            margin-top: 6px;
            color: #fff;
            font-size: 22px;
            font-weight: bold;
            text-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);

            span {
                color: #fff;
                font-size: 13px;
                font-weight: 700;
                text-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
            }
        }
    }
}
</style>